<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>menubutton 测试</title>
<link href="../../../css/assets/dpl/base.css" rel="stylesheet"/>
<link href="../../../button/demo/assets/custombutton.css" rel="stylesheet"/>
<link href="../assets/menubutton.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/menu.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/menuitem.css" rel="stylesheet"/>
<link href="../../../menu/demo/assets/submenu.css" rel="stylesheet"/>
<style>
    .ks-menu {
        background: white;
        border: 1px solid red;
    }

    li {
        padding: 5px;
        border: 1px solid white;
    }
</style>
<style>
    h1 {
        font-size: 2em;
        margin: 10px;
        text-align: center;
    }

    h2 {
        font-size: 1.5em;
        margin: 10px;
        text-align: center;
    }

    #wrap {
        width: 500px;
        margin: 0 0 0px 100px;
    }
</style>
</head>
<body>
<div id="wrap">

    <h1 id="describe">菜单按钮演示</h1>
    <div style="height:200px;overflow: auto;border:1px solid red;">
        <h2>设计说明</h2>
        <ol>
            <li>支持键盘，鼠标互操作</li>
            <li>符合 wai-aria 规范</li>
            <li>构建组件层次</li>
        </ol>

        <h2>使用说明</h2>
        <ol>
            <li>
                tab 移动焦点到按钮：按钮周边粉框
            </li>
            <li>
                按钮获得焦点时点击上或下键，弹出菜单
                <ol>
                    <li>或点击按钮弹出菜单</li>
                </ol>
            </li>


            <li>
                菜单弹出后，上下键选择菜单项
                <ol>
                    <li>或通过鼠标掠过</li>
                </ol>
            </li>

            <li>
                带有子菜单的菜单项通过右键激活子菜单，左键收缩子菜单
                <ol>
                    <li>或通过鼠标掠过，自动弹出子菜单</li>
                </ol>
            </li>

            <li>
                菜单项弹出后，按下 enter 或 space 则选中当前高亮菜单项
                <ol>
                    <li>或通过鼠标点击选中任意菜单项</li>
                </ol>
            </li>

            <li>
                esc 隐藏下拉菜单（焦点仍然在按钮上）
                <ol>
                    <li>或通过鼠标点击文档空白区域（按钮失去焦点）</li>
                </ol>
            </li>
        </ol>
    </div>

    <h1>简单菜单按钮</h1>
    <div id="button_container" role='application'>

    </div>

    <label>禁用：<input type="checkbox" id='dis'/></label>

    <label><input type="button" id='destroy1' value="销毁"/></label>

    <script src="/kissy/build/seed.js"></script>
    <script src="/kissy/src/package.js"></script>

    <!--
<script src="http://assets.daily.taobao.net/s/kissy/1.2.0/kissy.js"></script>
-->

    <script>

            KISSY.use("menubutton,menu,separator", function (S, MenuButton, Menu,Separator) {
                var $ = S.all;

                var sb = new Menu.PopupMenu();

                sb.addChild(new Menu.Item({content:"已买到的宝贝"}));
                sb.addChild(new Menu.Item({content:"已卖出的宝贝",
                    disabled:true}));


                var sb2 = new Menu.PopupMenu();
                sb2.addChild(new Menu.Item({content:"收藏的宝贝"}));
                sb2.addChild(new Menu.Item({content:"收藏的店铺"}));
                var b2 = new Menu.SubMenu({
                    content:"收藏夹",

                    menu:sb2
                });
                sb.addChild(b2);

                var b = new Menu.SubMenu({
                    content:"我的淘宝",
                    menu:sb
                });

                var alone = new Menu.Item({content:"我要买"});

                //control
                //view as a parameter
                var bbbbb = new MenuButton({
                    content:"淘宝网",
                    describedby:"describe",
                    matchElWidth:false,
                    collapseOnClick:true,
                    menu:{
                        width:200,
                        children:[
                            b,
                            new Separator(),
                            alone,
                            new Menu.Item({content:"我要卖"})
                        ]
                    },
                    render:"#button_container"
                });


                bbbbb.render();

                var dis = $("#dis");

                bbbbb.on("click", function (ev) {
                    S.log("selected : " + ev.target.get("content"));
                });

                $('#destroy1').on("click", function () {
                    bbbbb.destroy();
                });

                dis.on("click", function () {
                    if (dis[0].checked) {
                        bbbbb.set("disabled", true);
                    } else {
                        bbbbb.set("disabled", false);
                    }
                });

                if (dis[0].checked) {
                    bbbbb.set("disabled", true);
                } else {
                    bbbbb.set("disabled", false);
                }
            });

    </script>
</div>
</body>
</html>